<!DOCTYPE html>
<html lang="en">

<head>
    <title>网格效果</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./rect.css" />
</head>

<body>
    <div class="header">
        <span class="reduce img">-</span>
        <span class="add img">+</span>
        <span class="title-big">CSS中网格效果的实现方案</span>
    </div>
    <div class="layout">
        <!--  第一种方案-->
        <div class="contain box1">
            <div class="descript">
                <span class="title">方案1: </span>table样式
                <span class="green"><br>此方案优点：
                <br> 1:原理直观，易理解；

                <p class="red"><br> 此方案缺点：
                <br> 1；添加了较多冗余的元素；</p>
            </div>
        </div>
        <!--  第二种方案-->
        <div class="contain box2">
            <div class="descript">
                <span class="title">方案2: </span>双重条纹
            </div>
        </div>
        <div class="contain box3">  
                    <p>
                        <span>1:设置水平条纹；</span><br>   
                        <span class="back">background-image:</span>
                        repeating-linear-gradient(red 0%, red 10%,white 10%, white 20%);
                    </p>
                    <span class="step step2-1">
                        </span>
        </div> 
        <div class="contain box4"> 
                   <p>
                       
                     <span>2:添加垂直条纹；</span><br>
                    <span class="back">background-image:</span><br>   
                    repeating-linear-gradient(red 0%, red 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%),<br>   
                    repeating-linear-gradient(to right,red 0%, red 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%);
                    <span class=" step step2-2">
                        </span>
                    </p>
    </div>
    <div class="contain box5">

   
                    <p>
                       <span> 3:把网络线调细一点，效果会更好 </span><br>
                    <span class="back">background-image:</span>
                   linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
                   <span class=" step step2-3">
                    </span>
                    </p>
                </div>
                <div class="contain box6">

              
                    <p>
                            <span> 4:把因为渐变可以设置方向，所以通过调整方向，还可以形成更多网格效果 </span><br>
                         <span class="back">background-image:</span><br>
                         repeating-linear-gradient(60deg, red 0%, red 1%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 10%), 
                         repeating-linear-gradient(-60deg, red 0%, red 1%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 10%);

                        <span class=" step step2-4">
                         </span>
                         </p>
            </div>

           <div class="green contain box7">
                            此方案优点：<br> 
                            1:用单个元素实现，不用添加冗余元素；<br> 
                            2:可以实现任意多颜色的交替重复的网格；<br> 
                            3:通过合理地组合渐变，可以实现多种形状的网格；
               
            </div>
        </div>

       
    </div>
    <script src="./rect.js"></script>
</body>

</html>